<template>
  <view class="centerAd">
    <!-- <img src="https://snyz.oss-cn-hangzhou.aliyuncs.com/assets/template/ad1.png" alt="" class="ad-top" @tap="$goGoodsDeail({ id: 200 })">
    <div class="ad-bottom">
      <img :src="ad1.image" alt="" class="ad-bottom-left" mode="widthFix" @tap="goWebview(ad1.url)">
      <div class="ad-bottom-right">
        <img :src="ad2.image" alt="" class="ad-bottom-right-img" mode="widthFix" @tap="goWebview(ad2.url)">
        <img :src="ad3.image" alt="" class="ad-bottom-right-img" mode="widthFix" @tap="goWebview(ad3.url)">
      </div>
    </div> -->
    <!-- <div class="title">
      <img src="../https://snyz.oss-cn-hangzhou.aliyuncs.com/assets/index/centerAd/title.png" alt="" class="img">
      <span class="text blue">企业</span>
      <span class="text">租赁</span>
      <span class="desc">首月0元 租满三免一</span>
    </div>
    <div class="box" @tap="goLease">
      <img src="../https://snyz.oss-cn-hangzhou.aliyuncs.com/assets/index/centerAd/lease-1.png" alt="" class="img">
      <img src="../https://snyz.oss-cn-hangzhou.aliyuncs.com/assets/index/centerAd/lease-2.png" alt="" class="img">
      <img src="../https://snyz.oss-cn-hangzhou.aliyuncs.com/assets/index/centerAd/lease-3.png" alt="" class="img">
    </div> -->
    <!-- <div class="type type1" v-if="data.type === 3">
      <div class="top" @tap="goWebview(0)">
        <img :src="urls[0]" alt="" class="img1" />
      </div>
      <div class="bottom flex">
        <img
          :src="urls[1]"
          alt=""
          class="img2"
          @tap="goWebview(1)"
          mode="aspectFit"
        />
        <img
          :src="urls[2]"
          alt=""
          class="img2"
          @tap="goWebview(2)"
          mode="aspectFit"
        />
      </div>
    </div> -->
    <!-- <div class="type type2" v-if="data.type === 4"> -->
    <view class="news">
      <view class="news-header">
        <img :src="urls[0]" alt="" class="img1" />
      </view>
      <view class="news-content">
        <div class="news-lf" @tap="goWebview(1)">
          <img :src="urls[1]" alt="" class="img2" />
        </div>
        <div class="news-ri">
          <div class="ri-img">
            <img :src="urls[2]" alt="" class="img3" @tap="goWebview(2)" />
          </div>
          <div class="ris-img">
            <img :src="urls[3]" alt="" class="img3" @tap="goWebview(3)" />
          </div>
        </div>
      </view>
    </view>
    <!-- <div class="type type2">
      <div class="top" @tap="goWebview(0)">
        <img :src="urls[0]" alt="" class="img1" />
      </div>
      <div class="bottom flex">
        <div class="left" @tap="goWebview(1)">
          <img :src="urls[1]" alt="" class="img2" mode="aspectFit" />
        </div>
        <div class="right flex-col">
          <img
            :src="urls[2]"
            alt=""
            class="img3"
            @tap="goWebview(2)"
            mode="aspectFit"
          />
          <img
            :src="urls[3]"
            alt=""
            class="img3"
            @tap="goWebview(3)"
            mode="aspectFit"
          />
        </div>
      </div>
    </div> -->
  </view>
</template>
<script>
export default {
  name: "centerAd",
  data() {
    return {
      ad1: {},
      ad2: {},
      ad3: {},
      data: {
        type: "",
      },
      urls: [
        "https://snyz.oss-cn-hangzhou.aliyuncs.com/upload/2022-07-25/02497b79f771434db4ce0f49afbb3001.png",
        "https://snyz.oss-cn-hangzhou.aliyuncs.com/upload/2022-07-22/caa13eeb387c4d039c5fede3510da29b.jpg",
        "https://snyz.oss-cn-hangzhou.aliyuncs.com/upload/2022-07-25/4b4347ea013b4625ad3fceb460ff26e0.png",
        "https://snyz.oss-cn-hangzhou.aliyuncs.com/upload/2022-07-25/21ca1e4599324d98b83394e358b83235.png",
      ],
    };
  },
  mounted() {
    this.getAd();
  },
  methods: {
    getAd() {
      this.$http
        .request(
          {
            url: "/index/findActivityMarketing.json",
            method: "GET",
          },
          false
        )
        .then(
          ({
            data: {
              marketingDTO: { pic },
            },
          }) => {
            if (pic) {
              this.data = JSON.parse(pic);
              this.urls = this.data.url.map((item) => item.coverUrl);
            }
          }
        );

      // this.$api.getAdList({ position: 5 }).then(data => {
      //   const [ad1, ad2, ad3] = data
      //   this.ad1 = ad1
      //   this.ad2 = ad2
      //   this.ad3 = ad3
      // })
    },
    goGoods() {
      this.$goGoodsDeail({ id: 200 });
    },
    goLease() {
      this.$goPage("/pagesIndex/companyLease/index");
    },
    goWebview(index) {
      const url = this.data.url[index].externalUrl;
      console.log(url);
      if (url) {
        if (url.includes("alipays://")) {
          my.ap.navigateToAlipayPage({
            path: url,
            success: () => {},
            fail: (error) => {
              my.alert({ content: "失败：" + JSON.stringify(error) });
            },
          });
        } else {
          this.$goWebview(url);
        }
      }
    },
  },
};
</script>
<style lang="scss">
.centerAd {
  width: 100vw;
  height: 301px;
  background-color: #fff;
  border-radius: 7px;
  padding: 12px;
  margin-top: 10px;
  .news {
    width: 100%;
    height: 100%;
    .news-header {
      width: 100%;
      height: 71px;
      border-radius: 7px;
      margin-bottom: 9px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .news-content {
      width: 100%;
      height: 171px;
      display: flex;
      justify-content: space-between;
      .news-lf {
        width: 48.5%;
        height: 171px;
        border-radius: 7px;
        img {
          width: 100%;
          height: 171px;
          border-radius: 7px;
        }
      }
      .news-ri {
        width: 48.5%;
        height: 171px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .ri-img,
        .ris-img {
          width: 100%;
          height: 81px;
          border-radius: 7px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
</style>
